<template>
  <div style="width:50%">
    <p class="font">单位人员分布统计</p>
    <div id="chartscomp" class="echart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  props: {
    companyuserData: Array,
  },
  data() {
    return {
      pname: [],
      total: [],
    };
  },
  methods: {
    drawLine(n) {
      for (let i = 0; i < n.list.length; i++) {
        this.pname.push(n.list[i].name);
        this.total.push(n.list[i].total);
      }
      // 基于准备好的dom，初始化echarts实例
     
          const chart = this.$refs.chart;
  
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      // 绘制图表
      let option = {
        tooltip: {
          trigger: "axis",
          position: function(p) {
            // 位置回调
            // //console.log && //console.log(p);
            return [p[0] + 10, p[1] - 10];
          },
          axisPointer: {
            type: "none",
          },
        },
        grid: {
          left: "0",
          right: "5%",
          top: "5%",
          bottom: "0",
          containLabel: true,
          height: "100%",
          width: "85%",
        },
        xAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            data: this.pname,
            boundaryGap: ["5%", "5%"],
            splitLine: { show: false },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // offset: 10,
            nameTextStyle: {
              fontSize: 12,
            },
            axisLabel: {
              show: true,
              formatter:function (params) {
                var val='';
                if(params.length>=4){
                  val=params.substr(0,4)+'...';
                  return val;
                }else{
                  return params;
                }
              },
              textStyle: {
                // align:'left',
                color: "#fff",
                fontSize: 16,
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "slider", //详细配置可见echarts官网
            // show: true, //是否显示
            yAxisIndex: [0],
            show: false,
            // left: "93%", //滑动条位置
            // start: 1, //初始化时，滑动条宽度开始标度
            // end: 50, //初始化时，滑动条宽度结束标度<br data-filtered="filtered">
            width: 15,
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示五个。
            textStyle: {
              color: "rgba(0,0,0,0)",
            },
          },
          {
            type: "inside", //内置滑动，随鼠标滚轮展示
            yAxisIndex: [0],
            start: 1, //初始化时，滑动条宽度开始标度<br data-filtered="filtered">                        end: 50  //初始化时，滑动条宽度结束标度
          },
        ],
        // dataZoom: [
        //   {
        //     // yAxisIndex: 0,
        //     show: false,
        //     type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        //     startValue: 0, // 从头开始。
        //     endValue: 4 // 一次性展示五个。
        //   }
        // ],
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.total,
            barWidth: 6,
            // barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "right",
                // offset: [5, 2],
                textStyle: {
                  color: "white",
                  fontSize: 14,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgb(8, 143, 252)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(5, 192, 252)", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgb(1, 244, 251)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setInterval(function() {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == n.list.length) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 3000);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    this.drawLine(this.companyuserData[0]);
  },
};
</script>
<style lang="less" scoped>
.echart {
  // width: 100%;
  height: 7vw;
}
.font {
  font-size: 23px;
  padding-bottom: 0.5vw;
  color: white;
}
</style>
